<template>
    <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar :isShowTransparentTitle="false" navbarType='5'>
            <view class="ml10" slot="left">
                我的
            </view>
        </wlk-navbar>

        <view class="user-card overHidden">
            <view class="avatar-bg">
                <image mode="aspectFill" class="block" :src="images.userBg"></image>
            </view>
            <view class="overlay overHidden">
                <view class="wlkflex user-info">
                    <view class="avatar wlkflex justify-center">
                        <u-avatar shape="circle" size="60" :src="userInfo.avatar"></u-avatar>
                    </view>
                    <view class="realname ml15" @click="loginPopupShow">
                        {{userInfo.nickname || '去登录' }}
                    </view>
                </view>
                <view class="vip-card relative">
                    <block  v-if="$u.test.isEmpty(userInfo.card) || userInfo.card.status=='hidden'">
                        <view class="title bold">会员卡</view>
                        <view class="desc mt10">成为会员享洗护折扣</view>
                        <view class="buy-btn">
                            <u-button
                                :customStyle="{
                                height:'60rpx',
                                fontSize:'14px',
                                color:'#634738',
                                fontWeight:'bold',

                            }" color="#f1c68e" size="normal" shape="circle" text="开通会员" @click="$Router.push('/pages/user/card')"></u-button>
                           </view>
                    </block>
                    <block v-else>
                        <view class="title bold">{{userInfo.card.info.name}}</view>
                        <view class="desc mt10">有效时间：{{userInfo.card.endtime}}</view>
                        <view class="buy-btn">
                            <u-button
                                    :customStyle="{
                                height:'60rpx',
                                fontSize:'14px',
                                   color:'#634738',
                                fontWeight:'bold',

                            }" color="#f1c68e" size="normal" shape="circle" text="已开通" @click="$Router.push('/pages/user/card')"></u-button>
                        </view>
                    </block>

                    <image  class="block" src="/static/images/user/vip.png"></image>
                </view>
            </view>

        </view>
        <view class="nav">
            <view class="order-card wlkflex justify-between br08 shadow">
                <view class="grid" @click="$Router.push('/pages/order/index?state=0')">
                    <view class="wlkflex justify-center ">
                        <u--image :showLoading="true" src="/static/images/user/wallet.png" width="30" height="30"></u--image>

                    </view>
                    <view class="mt15 center">待付款</view>
                </view>
                <view class="grid" @click="$Router.push('/pages/order/index?state=1')">
                    <view class="wlkflex justify-center ">
                        <u--image :showLoading="true" src="/static/images/user/barcode.png" width="30" height="30"></u--image>

                    </view>
                    <view class="mt15 center">待核销</view>
                </view>
                <view class="grid relative"@click="$Router.push('/pages/order/index?state=2')">
                    <view class="wlkflex justify-center ">
                        <u--image :showLoading="true" src="/static/images/user/refund.png" width="30" height="30"></u--image>

                    </view>
                    <view class="mt15 center">清洗中</view>
                </view>
                <view class="grid over relative" @click="$Router.push('/pages/order/index?state=3')">
                    <view class="wlkflex justify-center ">
                        <u--image :showLoading="true" src="/static/images/user/truck.png" width="36" height="36"></u--image>
                    </view>
                    <view class="mt05 center">已完成</view>
                    <view class="triangle triangle_border"></view>
                    <view class="triangle triangle_bg" ></view>
                </view>
                <view class="order-all grid" @click="$Router.push('/pages/order/index?state=all')">
                    <view class="wlkflex justify-center ">
                        <u--image :showLoading="true" src="/static/images/user/checklist.png" width="30" height="30"></u--image>
                    </view>
                    <view class="mt15 center">全部订单</view>
                </view>
            </view>
            <view class="tools-card shadow">
                <view class="head-title wlkflex">
                    <view class="tip" :style="{backgroundColor: themeColor}"></view>
                    <view class="title bold">常用工具</view>
                </view>
                <u-cell-group :border="false">
                    <u-cell :border="false" isLink @click="scanCode" v-if="userInfo.isWorker">
                        <uni-icons slot="icon" type="scan" size="25"></uni-icons>
                        <text class="title" slot="title">扫码核销</text>
                    </u-cell>
                    <u-cell :border="false" isLink @click="$Router.push('/pages/wallet/index')">
                        <uni-icons slot="icon" type="wallet" size="25"></uni-icons>
                        <text class="title" slot="title">我的钱包</text>
                    </u-cell>
                    <u-cell :border="false" isLink @click="$Router.push('/pages/coupon/list')">
                        <uni-icons slot="icon" type="shop" size="25"></uni-icons>
                        <text class="title" slot="title">领券中心</text>
                    </u-cell>
                    <u-cell :border="false" isLink @click="$Router.push('/pages/user/coupon')">
                        <uni-icons slot="icon" type="images" size="25"></uni-icons>
                        <text class="title" slot="title">我的券包</text>
                    </u-cell>
                    <u-cell :border="false" isLink icon="integral-fill" @click="$Router.push('/pages/user/info')">
                        <uni-icons slot="icon" type="vip" size="25"></uni-icons>
                        <text class="title" slot="title">个人信息</text>
                    </u-cell>
                    <u-cell :border="false" isLink icon="integral-fill" @click="openWork">
                        <uni-icons slot="icon" type="headphones" size="25"></uni-icons>
                        <text class="title" slot="title">平台客服</text>
                    </u-cell>
                    <u-cell :border="false" isLink icon="integral-fill" @click="outModel = true">
                        <uni-icons slot="icon" type="undo" size="25"></uni-icons>
                        <text class="title" slot="title">退出登入</text>
                    </u-cell>
                </u-cell-group>
            </view>
        </view>
        <u-modal

                :show="outModel"
                :showCancelButton="true"
                @cancel ='outModel =false'
                @close ='outModel =false'
                :closeOnClickOverlay="true"
                @confirm="logoutFun"
                confirmColor="#333"
                content="确定退出登录？"
        ></u-modal>
        <wlk-tabbar></wlk-tabbar>
    </view>


</template>
<script>
    var _self;
    import {toWork, getUrlQuery} from '@/wlkutils/tools';
    import {mapMutations, mapActions, mapState, mapGetters} from 'vuex';
    export default {
        computed: {
            ...mapGetters(['userInfo','themeColor','isLogin','images','service'])

        },
        data() {
            return {
                outModel:false,
                style:{marginTop:''},
            };
        },
        onLoad() {
            uni.hideTabBar();
            _self = this;
        },
        onShow() {
            this.isLogin?this.getUserInfo():'';
        },
        // 下拉刷新
        onPullDownRefresh() {
            this.isLogin?this.getUserInfo():'';
        },
        created() {
            this.style.marginTop = uni.$u.addUnit(uni.getSystemInfoSync().statusBarHeight + 44, 'px');
        },
        methods: {
            ...mapActions(['getUserInfo','logout']),
            loginPopupShow(){
                if(!this.isLogin){
                    this.$store.commit('setLoginPopupShow', true);
                }
            },
            logoutFun() {
                this.outModel =false;
                this.logout();
            },
            openWork(){
                toWork(this.service.kf_url,this.service.corp_id);
            },
            scanCode(){
                uni.scanCode({
                    scanType: ['qrCode'],
                    success: function (res) {
                      let code = getUrlQuery(res.result, 'code');
                      if (code) {
                        _self.$Router.push('/pages/merch/verify?code=' + code);
                      } else {
                        uni.$u.toast('请扫描正确的二维码');
                      }
                      console.log('条码类型：' + res.scanType);
                      console.log('条码内容：' + res.result);
                    },fail:function (e) {
                        console.log(e)
                    },complete:function(m){
                        console.log(m)
                    }
                });
            }
        }
    }
</script>
<style lang="scss">
   page{
       .user-card{
           width: 202%;
           border-radius: 0 0 50% 50%;
           /*background-color: black;*/
           margin-left: -51%;

           .avatar-bg{
               height: 498rpx;
               overflow: hidden;
               image{
                   width: 100%;
                   height: 100%;
               }
           }
           .overlay{
               height: 500rpx;
               position: absolute;
               z-index: 997;
               width: 202%;
               top:0;
               gap: 20px;
               border-radius: 0 0 50% 50%;
               backdrop-filter: blur(20px);
               background-color: rgba(255,255,255, 0.289);
               border: 0px rgba(255,255,255,0.4) solid;
               border-bottom: 0px rgba(40,40,40,0.35) solid;
               border-right: 0px rgba(40,40,40,0.35) solid;
               .user-info{
                   margin-left: 440rpx;
                   width: 600rpx;
                   margin-top: 170rpx;
                   .avatar{
                       border-radius: 50%;
                       border: 2px solid white;
                   }
                   .realname{
                       font-weight: bold;
                       font-size: $font-lg;
                   }
               }
                .vip-card{
                    margin-top: 54rpx;
                    height: 170rpx;
                    margin-left: 416rpx;
                    width: 686rpx;
                    /*background-image: linear-gradient(to right top, #fdfaea, #f7edca, #f4dfab, #f2d18c, #f1c16e);*/
                    background: linear-gradient(-120deg, #3E445A, #31374A, #2B3042, #262B3C);
                    border-radius: 10px 10px 0 0;
                    color: #333;
                    padding: 20rpx 0 0 30rpx;
                    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
                    .title{
                        font-size: $font-max;
                        color: #F1C68E;
                    }
                    .desc{
                        font-size: $font-sm;
                        color: #FFFFFF;
                    }
                    image{
                        position: absolute;
                        right: 30rpx;
                        top: 0rpx;
                        z-index: 998;
                        /*width: 196rpx;*/
                        /*height: 80rpx;*/
                        width: 396rpx;
                        height: 180rpx;
                        opacity: .2;
                    }
                    .buy-btn{
                        position: absolute;
                        right: 30rpx;
                        top:45rpx;
                        width: 160rpx;
                        z-index: 999;

                    }
                }
           }
       }
       .nav{
           width: 92%;
           margin: 50rpx  auto 0 auto;
           padding-bottom: 120rpx;
           .order-card{
               background-color: #FFFFFF;
               font-size:$font-base;
               padding: 20rpx 0;
               .grid{
                   padding: 20rpx 0;
                   width: 20%;
               }
               .over{
                   .triangle {
                       position: absolute;
                       top: 60rpx;
                       z-index: 998;
                       overflow: hidden;
                       width: 0;
                       height: 0;
                       border-width: 5px;
                       border-style: dashed  solid  dashed  dashed;

                   }
                   .triangle_bg {
                       right: -19rpx;
                       z-index: 999;
                       border-color: transparent transparent  transparent #f3f3f3;

                   }
                   .triangle_border {
                       right: -20rpx;
                       border-color:transparent transparent  transparent #f3f3f3;
                   }
               }
               .order-all{
                   box-shadow: -5px 0 4px -2px rgba(0, 0, 0, 0.05);
               }
           }
           .tools-card{
               .head-title{
                   padding: 0 30rpx 30rpx 30rpx;
                   .tip{
                       width: 8rpx;
                       height: 28rpx;
                       margin-right: 10rpx;
                       border-radius: 10px;
                   }
                   .title{
                       font-size: $font-lt;
                   }
               }
               border-radius: 8px;
               background-color: #FFFFFF;
               font-size:$font-base;
               padding: 30rpx 0 40rpx 0;
               margin-top: 40rpx;
               .u-cell{
                   padding:10rpx 0;
               }
               .title{
                   font-size:$font-base;
                   margin-left: 10rpx;
               }
           }
       }
   }
</style>
